<!-- 首页轮播图 -->
<template>
  <div class="icons-container">
    <el-button type="primary" @click="add">添加轮播图</el-button>

    <div class="icons-wrapper" v-loading="loading">
      <div v-for="(item, index) in datas" :key="index">
        <div class="icon-item">
          <p>{{ item.title }}</p>
          <el-image
            fit="cover"
            :src="item.imgUrl"
            style="width: 100%; height: 350px"
            @click="jump(item.runUrl)"
            lazy
          ></el-image>

          <el-row type="flex" justify="space-between">
            <label class="lable-style" @click="edit(item)">编辑</label>
            <label class="lable-style" @click="deleteLBT(item.id)">撤图</label>
          </el-row>
        </div>
      </div>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.start"
      :limit.sync="listQuery.length"
      @pagination="getLBT"
      style="float:left;width:100%;"
    />

    <!-- 添加轮播图 -->
    <el-dialog
      append-to-body="true"
      title="添加轮播图"
      :visible.sync="dialogFormVisible"
      @keyup.enter.native="isEdit ? modiftLBT() : addLBT()"
    >
      <el-form :model="form" @submit.native.prevent>
        <el-form-item label="轮播图1：" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://10.0.0.74:8090/uploadImgUrl"
            v-loading="dialogLoading"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :http-request="addImg"
          >
            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="关联链接：" :label-width="formLabelWidth">
          <el-input v-model="form.runUrl" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="isEdit ? modiftLBT() : addLBT()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  appLetsFirstpageHead,
  uploadImg,
  addLBT,
  modiftLBT,
  deleteLBT
} from "@/api/smallRoutine";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { del, delAll } from "@/api/picture";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";

export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      dialogFormVisible: false,
      loading: true,
      dialogLoading: false,
      isEdit: false,
      form: {
        id: "",
        imgUrl: "",
        runUrl: ""
      },
      formLabelWidth: "120px",
      url:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571132160231&di=5fb3ef699eef7e918b13dbe6048a202d&imgtype=0&src=http%3A%2F%2Fpic38.nipic.com%2F20140228%2F2457331_083845176000_2.jpg",
      datas: [],
      listQuery: {
        start: 1,
        length: 10
      }
    };
  },
  computed: {
    ...mapGetters(["imagesUploadApi"])
  },
  created() {
    console.log("created");

    this.getLBT();
  },
  methods: {
    add() {
      this.isEdit = false;
      this.form.id = "";
      this.form.imgUrl = "";
      this.form.runUrl = "";
      this.dialogFormVisible = true;
    },
    edit(data) {
      this.isEdit = true;
      this.form.id = data.id;
      this.form.imgUrl = data.imgUrl;
      this.form.runUrl = data.runUrl;
      this.dialogFormVisible = true;
    },
    jump(url) {
      window.location.href = url;
    },
    // 图片相关
    handleAvatarSuccess(res, file) {
      this.form.imgUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      return true;
    },
    // 轮播图
    // 获取列表
    getLBT() {
      this.listLoading = true;
      var params = {
        pageNum: this.listQuery.start,
        pageSize: this.listQuery.length,
        channelType: "APPLETS"
      };
      appLetsFirstpageHead(params).then(response => {
        console.log(response.content);
        this.datas = response.content;
        this.total = response.totalElements;

        this.loading = false;
      });
    },
    // 上传轮播图
    addImg(data) {
      this.dialogLoading = true;
      const formData = new FormData();
      formData.append("file", data.file);
      uploadImg(formData).then(res => {
        this.dialogLoading = false;
        this.form.imgUrl = res.data.filePath;
      });
    },
    // 添加轮播图
    addLBT() {
      if (this.form.imgUrl == "") {
        alert("请上传轮播图");
      } else if (this.form.runUrl == "") {
        alert("请输入关联链接");
      } else {
        this.dialogFormVisible = false;
        var params = {
          imgUrl: this.form.imgUrl,
          runUrl: this.form.runUrl,
          channelType: "APPLETS"
        };
        addLBT(params).then(response => {
          this.getLBT();
        });
      }
    },
    // 修改轮播图
    modiftLBT() {
      if (this.form.imgUrl == "") {
        alert("请上传轮播图");
      } else if (this.form.runUrl == "") {
        alert("请输入关联链接");
      } else {
        this.dialogFormVisible = false;
        var params = {
          id: this.form.id,
          imgUrl: this.form.imgUrl,
          runUrl: this.form.runUrl
        };
        modiftLBT(params).then(response => {
          this.getLBT();
        });
      }
    },
    // 撤销轮播图
    deleteLBT(id) {
      console.log("删除" + id);
      var params = {
        id: id
      };
      deleteLBT(params).then(response => {
        this.getLBT();
      });
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.icons-container {
  margin: 10px 20px 20px 20px;
  overflow: hidden;

  .icons-wrapper {
    margin: 0 auto;
  }
  .icon-item {
    margin: 20px 20px 20px 0px;
    width: 40%;
    text-align: left;
    float: left;
    font-size: 20px;
    color: black;
    cursor: pointer;
  }
  .lable-style {
    font-weight: 1;
    cursor: pointer;
  }
}
</style>